﻿<html>
    <body>
<link href="/static/plugs/layui/css/layui.css" rel="stylesheet">
     <style>
     .main{float:left;width:100%;
    /*padding: 50px;*/
    box-sizing: border-box;}
            .main .content{float:left;width:100%;}
     .main .list{float:left;width:100%;}
     
     .main .list .item{float:left;width:350px;    text-align: center;margin-bottom:30px}
     .main .list .item .img_section{
         float: left;
         height: 300px;
         width: 300px;
         background-size: 100% 100%;
         margin-left: 25px;
     }
     .main .list .item .mtit{
         float: left;
         width:  100%;
         line-height:30px;
         
     }
     .main .list .item .more{
         float: left;
         width:  100%;
         
     }
    .main .list .item .buy_btn {
        margin:0 auto;
    width: 132px;
    height: 36px;
    background-color: rgb(0, 0, 0);
    font-size: 12px;
    font-family: "AvenirNext";
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 36px;
    -moz-transform: matrix( 1.15048208638681,0,0,1.14991853923949,0,0);
    -webkit-transform: matrix( 1.15048208638681,0,0,1.14991853923949,0,0);
    -ms-transform: matrix( 1.15048208638681,0,0,1.14991853923949,0,0);
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
}
     .page_colum{
         
    margin-top: 30px;
    float: left;
    width: 100%;
    text-align: center;
     }
     </style>
     <style>
        .main .list .item img {
                 float: left;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
         }
     </style>
 <div class=main>
     {include file='index/header'} 
     
    <div class=content style="margin-top:30px;padding:30px;box-sizing:border-box">
             <div class=list id=dlist></div>
             <div class=page_colum id=page_colum style="margin-top:30px"></div>
    </div>         
         
    </div>
<script src="/static/plugs/jquery/jquery.min.js"></script> 
  <script language="javascript" src="/static/plugs/layui/layui.js"></script>    
    <script>
    layui.use(['form', 'carousel', 'laypage'], function () {
     var form= layui.form,laypage  = layui.laypage;
    var limit=12;
    getdata(1);
        
    function getdata(page){
      layer.load()
      $.post('/index/index/plist_data',{limit:limit,page: page,cat:{$cat|default=0}},function (res) {
        layer.closeAll();
        console.log(res);
        layer.closeAll();
          var list="";
          var arr=res.data;
          var len=arr.length;
          for(var i=0;i<len;i++){
              var sarr=arr[i];
              list+='<div class=item><a href="/index/index/intro?id='+sarr['id']+'" target="_blank"  class=img_section><img src="'+sarr['cover']+'"></a><div class=mtit> '+sarr['name']+' </div><div class=mtit> '+sarr['no']+' </div><div class=sign>·······················</div><div class=more><!--a href="/index/index/intro?id='+sarr['id']+'" target="_blank" class=buy_btn>view more</a--></div></div>';
            //  list+='<div class=item><a href="/index/index/intro?id='+sarr['id']+'" target="_blank"  class=img_section style="background-image: url('+sarr['cover']+');"></a><div class=mtit># '+sarr['name']+' #</div><div class=mtit># '+sarr['no']+' #</div><div class=sign>·······················</div><div class=more><!--a href="/index/index/intro?id='+sarr['id']+'" target="_blank" class=buy_btn>view more</a--></div></div>';
          }
          $('#dlist').html(list);
          
          if(page==1){
         if (res.count == 0) {
             $('#dlist').html("暂无数据");
            $('.page_colum').hide()
          } else {
            $('.page_colum').show();
            laypage.render({
                elem: 'page_colum'
              , limit: limit
              , count: res.count
              , curr: res.curr
              , jump: function (obj, first) {
                  console.log(obj);
                if (!first) {
                    
                  getdata(obj.curr)
                }
              }
            });
          }
          }

        
      }
    );
  }

  
  
    })
    </script>

</div>


</body>
 
</html>